$('.swirp-left ul li').mouseenter(function () {
    $(this).find('.bg-img').css({ "background-position": "-18px 6px" })
    $('.box-list').css({ "display": "block" })
}).mouseleave(function () {
    $(this).find('.bg-img').css({ "background-position": "0px" })
    $('.box-list').css({ "display": "none" })
})
// 划过list显示
$('.box-list').mouseenter(function () {
    $(this).css({ "display": "block" })
}).mouseleave(function () {
    $(this).css({ "display": "none" })
})

//监听滚动条的函数
$(window).scroll(function () {
    //滚动条滚动到一定位置，左边的导航显示
    var st = $(this).scrollTop();// 滚动条离顶部的距离
    // console.log(st)
    // console.log(st)
    if (st >= 600) {
        $(".header").stop().animate({ 'top': '0' }, 200);
        $(".header-warp").stop().animate({ 'top': '0' }, 200);
        $('.louti').css({ "opacity": "1" })
    }
    if (st < 600) {
        $(".header").stop().animate({ 'top': '-100px' }, 200)
        $(".header-warp").stop().animate({ 'top': '-100px' }, 200)
        $('.louti').css({ "opacity": "0" })
    }
    if (st > 2600) {
        $('.louti').css({ "opacity": "0" })
    }

    // 楼梯
    // 先获取楼梯的数据
    $('.louti li').each(function (idx) {
        let index = idx;
        // 获取需要移动的内容的数据
        let text = $('.allList .list-1');
        $(this).click(function () {
            $("html ,body").stop().animate({ "scrollTop": text.eq(index).offset().top }, 500)
            $(this).addClass('hover').siblings().removeClass('hover')
        })

        $(this).mouseenter(function () {
            $(this).addClass('moushover')
        }).mouseleave(function () {
            $(this).removeClass('moushover')
        })
        $('.allList .list-1').eq(index).offset().top // 元素距离页面的高度
        if (st >= $('.allList .list-1').eq(index).offset().top - 543) {
            $('.louti li').eq(index).addClass('hover').siblings().removeClass('hover')
        }
    })

});

// 列表选项卡
$('.right-top li').mouseenter(function () {
    $(this).addClass('border').siblings().removeClass('border');
})




$('.right-top li').each(function (index, e) {
    $(e).mouseenter(function () {
        $('.nav-list').eq(index).removeClass('lists').siblings().addClass('lists');
    })
})

// 右边导航
$('.right-nav .top').mouseenter(function () {
    $(this).css({ "background": "#3da700" }).find('.num').css({ "background": "black" });
}).mouseleave(function () {
    $(this).css({ "background": "black" }).find('.num').css({ "background": "#3da700" });
})


//列表渲染
/*  首页商品列表接口
    接口地址：http://jx.xuzhixiang.top/ap/api/productlist.php
    接口请求方式：get
    接口参数：
    无需参数（不登录也能看到商品列表）
    uid 可选参数，可以看到当前用户上传到服务器的商品
    使用方式
    http://jx.xuzhixiang.top/ap/api/productlist.php
    服务器返回json数据 */
axios.get('http://jx.xuzhixiang.top/ap/api/productlist.php', {
    params: {
        uid: 50943
    }
}).then(res => {
    let resArr = res.data.data;
    // console.log(resArr);
    console.log(resArr[13].pimg)
    $('.li-1').html(`
    <a href="../html/detail.html?id=${resArr[13].pid}"><img src="${resArr[13].pimg}" alt=""></a>
        <p>${resArr[13].pname}</p>
        <section>￥${resArr[13].pprice}</section>`)
    $('.li-2').html(`
    <a href="../html/detail.html?id=${resArr[12].pid}"><img src="${resArr[12].pimg}" alt=""></a>
        <p>${resArr[12].pname}</p>
        <section>￥${resArr[12].pprice}</section>`)
    $('.li-3').html(`
    <a href="../html/detail.html?id=${resArr[11].pid}"><img src="${resArr[11].pimg}" alt=""></a>
        <p>${resArr[11].pname}</p>
        <section>￥${resArr[11].pprice}</section>`)
    $('.li-4').html(`
    <a href="../html/detail.html?id=${resArr[10].pid}"><img src="${resArr[10].pimg}" alt=""></a>
        <p>${resArr[10].pname}</p>
        <section>￥${resArr[10].pprice}</section>`)
    $('.li-5').html(`
    <a href="../html/detail.html?id=${resArr[9].pid}"><img src="${resArr[9].pimg}" alt=""></a>
        <p>${resArr[9].pname}</p>
        <section>￥${resArr[9].pprice}</section>`)
    $('.li-6').html(`
    <a href="../html/detail.html?id=${resArr[8].pid}"><img src="${resArr[8].pimg}" alt=""></a>
        <p>${resArr[8].pname}</p>
        <section>￥${resArr[8].pprice}</section>`)
    $('.li-7').html(`
    <a href="../html/detail.html?id=${resArr[7].pid}"><img src="${resArr[7].pimg}" alt=""></a>
        <p>${resArr[7].pname}</p>
        <section>￥${resArr[7].pprice}</section>`)
    $('.li-8').html(`
    <a href="../html/detail.html?id=${resArr[6].pid}"><img src="${resArr[6].pimg}" alt=""></a>
        <p>${resArr[6].pname}</p>
        <section>￥${resArr[6].pprice}</section>`)
    $('.li-9').html(`
    <a href="../html/detail.html?id=${resArr[5].pid}"><img src="${resArr[5].pimg}" alt=""></a>
        <p>${resArr[5].pname}</p>
        <section>￥${resArr[5].pprice}</section>`)
    $('.li-10').html(`
    <a href="../html/detail.html?id=${resArr[4].pid}"><img src="${resArr[4].pimg}" alt=""></a>
        <p>${resArr[4].pname}</p>
        <section>￥${resArr[4].pprice}</section>`)
    $('.li-11').html(`
    <a href="../html/detail.html?id=${resArr[3].pid}"><img src="${resArr[3].pimg}" alt=""></a>
        <p>${resArr[3].pname}</p>
        <section>￥${resArr[3].pprice}</section>`)
    $('.li-12').html(`
    <a href="../html/detail.html?id=${resArr[2].pid}"><img src="${resArr[2].pimg}" alt=""></a>
        <p>${resArr[2].pname}</p>
        <section>￥${resArr[2].pprice}</section>`)
    $('.li-13').html(`
    <a href="../html/detail.html?id=${resArr[1].pid}"><img src="${resArr[1].pimg}" alt=""></a>
        <p>${resArr[1].pname}</p>
        <section>￥${resArr[1].pprice}</section>`)
    $('.li-14').html(`
    <a href="../html/detail.html?id=${resArr[0].pid}"><img src="${resArr[0].pimg}" alt=""></a>
        <p>${resArr[0].pname}</p>
        <section>￥${resArr[0].pprice}</section>`)
    index();
})

//滑动图片效果
function index() {
    $('.nav-list li img').mouseenter(function () {
        $(this).stop().animate({ "right": "-10px" }, 200).next().css({ "color": "#19c289" })
    }).mouseleave(function () {
        $(this).stop().animate({ "right": "0px" }, 200).next().css({ "color": "black" })
    })
}
index();

$(".all").click(function () {
    location.href = "../html/list.html"
})



// 回到顶部

$('.glyphicon-menu-up').click(function () {
    $("html").stop().animate({ "scrollTop": 0 }, 200)
})


// 楼梯
// 先获取楼梯的数据
// $('.louti li').each(function (idx) {
//     let index = idx;
//     // 获取需要移动的内容的数据
//     let text = $('.allList .list-1');
//     $(this).click(function () {
//         $("html ,body").stop().animate({ "scrollTop": text.eq(index).offset().top }, 500)
//         $(this).addClass('hover').siblings().removeClass('hover')
//     })

//     $(this).mouseenter(function () {
//         $(this).addClass('moushover')
//     }).mouseleave(function () {
//         $(this).removeClass('moushover')
//     })

//     let _height = $(this).offset().top + 534;

// })



